<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <link rel="stylesheet" href="/static/css/style0.css">
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-btn-primary {
            border: 0px solid #C9C9C9;
            background-color: #fff;
            color: #555;
        }
        .layui-card-body{
            text-align: center;
        }
        .layui-card-body span{
            line-height: 30px;
        }
    </style>
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">个人信息</a>
                <a><cite>个人基本信息</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid" id="divvuehtml">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                     <form class="layui-form" id="add">
                         <input type="hidden" name="id" v-model="user.id"/>
                         <input type="hidden" name="photo" v-model="user.photo"/>
                            <table class="layui-table" lay-size="sm">
                                <thead>
                                <tr>
                                    <th colspan="4" style="text-align: center;">修改个人基本信息</th>
                                </tr>
                                </thead>
                                <tbody style="text-align: center;">
                                <tr>
                                    <td>导师名称</td>
                                    <td colspan="3">
                                        <input type="text" name="name"  :value="user.name" placeholder="请输入导师名称"  autocomplete="off" class="layui-input">
                                    </td>
                                </tr>
                                <tr>
                                    <td>登录密码</td>
                                    <td colspan="3">
                                        <input type="text" name="pwd" :value="user.pwd"  placeholder="请输入登录密码"  autocomplete="off" class="layui-input">
                                    </td>
                                </tr>
                                <tr>
                                    <td>导师职称</td>
                                    <td colspan="3">
                                        <select name="title" :value="user.title"  readonly="readonly" lay-verify="required">
                                            <option value="学术型硕士生导师">学术型硕士生导师</option>
                                            <option value="专业学位型硕士生导师">专业学位型硕士生导师</option>
                                            <option value="博士生导师">博士生导师</option>
                                            <option value="无">无</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>导师邮箱</td>
                                    <td colspan="3">
                                        <input type="text" name="email" :value="user.email"  placeholder="请输入导师邮箱"  autocomplete="off" class="layui-input">
                                    </td>
                                </tr>
                                <tr>
                                    <td>导师电话</td>
                                    <td colspan="3">
                                        <input type="text" name="phone" :value="user.phone" placeholder="请输入导师电话"  autocomplete="off" class="layui-input">
                                    </td>
                                </tr>
                                <tr>
                                    <td>是否具备招生资格</td>
                                    <td colspan="3">
                                        <select name="eligibleForAdmission" :value="user.eligibleForAdmission"  readonly="readonly" lay-verify="required">
                                            <option value="0">否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>导师简介</td>
                                    <td colspan="3">
                                        <textarea type="text" name="bio" :value="user.bio" class="layui-textarea" placeholder="请输入导师简介"></textarea>
                                    </td>
                                </tr>
                                <tr>
                                    <td>头像上传</td>
                                    <td style="text-align: left">
                                        <div class="layui-upload-drag" id="uploadadvert">
                                            <i class="layui-icon layui-icon-upload-drag"></i>
                                            <p>点击上传，或将文件拖拽到此处</p>
                                            <div class="layui-hide" id="uploadDemoView">
                                                <hr>
                                                <img src="" alt="上传成功后渲染" style="max-width: 196px">
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr >
                                    <td colspan="4">
                                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">修改</button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </form>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/xadmin.js"></script>
<script type="text/javascript" src="/static/js/vue.js"></script>
<script th:inline="none">
    var ve = new Vue({
        el: '#divvuehtml',//绑定vue渲染范围
        data: {
            user:{},
            "photo":"",
        },created: function () {//vue在打开html也没初始化创建函数
            this.ininUser();
        },mounted: function () {//初始化html完成后在进行操作
            setTimeout(function() {
                layui.use(['table','form','layer','laydate','upload'],function() {
                    var form = layui.form;
                    var layer = layui.layer;
                    var laydate = layui.laydate;
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#rzdate', //指定元素
                    });
                    var upload = layui.upload;
                    //拖拽上传
                    upload.render({
                        elem: '#uploadadvert'
                        ,accept: 'images'
                        ,field:"files"
                        ,url: '/api/upload/uploads.do' //改成您自己的上传接口
                        ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                            layer.load(); //上传loading
                        }
                        ,done: function(res){
                            layer.closeAll('loading'); //关闭loading
                            layer.msg('上传成功');
                            ve.user.photo=res.data;
                            layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', "/api/upload/getImage.do?filePath="+res.data);
                            //console.log(res)
                        },error: function(index, upload){
                            layer.closeAll('loading'); //关闭loading
                        }
                    });
                    //监听提交
                    form.on('submit(formDemo)', function(data){
                        var index;
                        $.ajax({
                            url : "/api/login/updateUserInfo.do",
                            type : "POST",
                            data : data.field,
                            dataType : "json",
                            beforeSend : function(XMLHttpRequest) {
                                index = layer.msg('正在提交数据中，请稍候', {
                                    icon : 16,
                                    time : false,
                                    shade : 0.8
                                });
                            },success : function(data) {
                                if(data.success){
                                    // 刷新父页面
                                    layer.alert(data.msg, {
                                        icon : 6
                                    });
                                    // 刷新父页面
                                    ve.ininUser();
                                }else{
                                    xadmin.alert(data.msg,2)
                                }
                            },complete : function(XMLHttpRequest, textStatus) {
                                layer.close(index);
                            },error : function(data) {
                                layer.alert('网络异常或者数据错误', {
                                    icon : 2
                                });
                            }
                        });
                        return false;
                    });
                });
            },100)
        },methods: {//调用函数
            ininUser:function () {
                $.get("/api/login/getUserInfo.do",function(data){
                    if(data.success){
                        ve.user = data.data.user;
                        if(data.data.user.photo!=null){
                            layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', "/api/upload/getImage.do?filePath="+data.data.user.photo);
                        }
                    }else{
                        xadmin.alert(data.msg,{icon:2});
                    }
                },"json")
            }
        },updated: function () {
            layui.use(['form'], function(){
                var form = layui.form;
                form.render();
            })
        }
    })
</script>
</html>
